<!-- 各街道停车场数量统计 -->
<template>
  <!-- <div class="w-100 h-100">
    <fakeLenfend
      :color="['rgb(3, 230, 254)', 'rgb(251, 216, 160)']"
      :text="['地下停车场', '地上停车厂']"
    >
    </fakeLenfend>

    <div class="w-100" style="height: 90%">
      <div
        id="gjdtccsl"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>
    </div>
  </div> -->
  <div class=" w-100 h-100">
    <fakeLenfend
      :color="['rgb(3, 230, 254)', 'rgb(251, 216, 160)']"
      :text="['地下停车场', '地上停车厂']"
    >
    </fakeLenfend>
     <div style="height: calc( 100% - 80px);overflow-y: auto;overflow-x: hidden;" class="w-100  autoscollgj ">
        <div  style="height: 600px;"   >
          <div
        id="gjdtccsl"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>

        </div>
     </div>
    </div>
 
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useFunc } from "@/hook/useFunc";

const props = defineProps({
  tccData: {
    type: Array,
    default: () => [],
  },
});

let option = {
  grid: {
    left: "20%", // 增加左边距
    top: "0",
    // 其他配置...
  },
  
  yAxis: {
    type: "category",
    data: props.tccData.map((item: any) => item.street),
    axisLabel: {
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    },
  },
  xAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value}个",
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    },
    splitLine: {
      show: true,
      lineStyle: {
        opacity: 0.2,
      },
    },
  },
  series: [
    {
      type: "bar",
      data: props.tccData.map((item: any) => item.aboveGroundCount),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "rgba(3, 230, 254, 0)" },
          { offset: 0.99, color: "rgba(3, 230, 254, 1" },
          { offset: 1, color: "rgba(3, 230, 254, 1)" },
        ]),
      },
      label: {
        show: true, // 开启显示
        position: "right", // 定位到柱状图的顶部
        formatter: "{c}", // {c} 代表当前数据值
        textStyle: {
          color: "#fff", // 文本颜色
          fontSize: 12, // 文本大小
        },
      },
    },

    {
      type: "bar",
      data: props.tccData.map((item: any) => item.notAboveGroundCount),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "rgba(251, 216, 160, 0)" },
          { offset: 0.99, color: "rgba(251, 216, 160, 1)" },
          { offset: 1, color: "rgba(251, 216, 160, 1)" },
        ]),
      },
      label: {
        show: true, // 开启显示
        position: "right", // 定位到柱状图的顶部
        formatter: "{c}", // {c} 代表当前数据值
        textStyle: {
          color: "#fff", // 文本颜色
          fontSize: 12, // 文本大小
        },
      },
    },
  ],
};

onMounted(() => {  
  let myChart = echarts.init(
    document.getElementById("gjdtccsl") as HTMLElement
  );
  myChart.setOption(option);
  const scrollContainer = document.querySelector(".autoscollgj");
  useFunc().autoScroll(scrollContainer, "vertical");
});
</script>

<style scoped lang="less"></style>
